<!DOCTYPE html>
<html lang="en">
{% include 'navbar.html' %}
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
    <meta charset="UTF-8">
    <title>Occupancy</title>
    <style>
        .form_room {
            border-radius: 25pt;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 15pt 15pt 20pt;

        }

        body {
            font-family: "Segoe UI";
            background: rgb(237, 238, 239);
        {#background: linear-gradient(0deg, rgba(44, 255, 210, 0.92) 0%, rgba(69, 165, 195, 0.92) 55%) no-repeat fixed;#}
        }

        .item {
            margin-top: 10pt;
            border-radius: 25pt;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 15pt 15pt 20pt;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div>
            <h1 class="mt-2" style="color: rgb(54,151,212)">Hotel occupancy</h1>
            <hr class="mt-0 mb-4">
            <form class="form_room">
                {% csrf_token %}
                <div class="form-group">
                    <label style="color: black" for="occupancy_date">Range of occupancy:</label>
                    <input type="hidden" name="occupancy_date" id="occupancy_date">
                    <div class="form-control" id="reportrange"
                         style="background: #fff; border-radius: 3pt; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>
                </div>
                <button type="submit" class="btn btn-light" formmethod="post" formaction="/room/occupancy/">
                    Search for
                    rooms
                </button>
            </form>
        </div>
    </div>
</div>
{% if all_rooms %}
    <h2 class="mt-2" style="color: rgb(54,151,212);text-align: center">General info</h2>
            <hr class="mt-0 mb-4">
    <div class="col-sm-6 item" style="margin-left: auto;margin-right: auto;text-align: center; margin-bottom: 10pt">
    <h4>All rooms: {{ all_rooms }}, busy: {{ busy_rooms }}, free: {{ free_rooms }}</h4>
    </div>
    <hr class="mt-0 mb-4">
{% endif %}
{% if lista %}
    <h2 class="mt-2" style="color: rgb(54,151,212);text-align: center">Specific types</h2>
            <hr class="mt-0 mb-4">
    <div class="row">
        <div class="row col-sm-10" style="margin-right: auto;margin-left: auto">
            {% for element in lista %}
                <div class="col-sm-6">
                    <div class="item">
                        <h3> Type of room: {{ element.type }}</h3>
                        <ul>
                            <li>All rooms: {{ element.all }}</li>
                            <li>Free rooms: {{ element.free }}</li>
                            <li>Busy rooms: {{ element.busy }}</li>
                        </ul>
                    </div>
                </div>
                <br>
            {% endfor %}
        </div>
    </div>
    <hr class="mt-0 mb-4">
{% endif %}
<script>
    $(function () {
        var end = moment().add(5, 'days');
        var start = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
            $("#occupancy_date").val(start.format('YYYY-MM-DD') + ':' + end.format('YYYY-MM-DD'));
            console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Tomorrow': [moment(), moment().add(1, 'days')],
                'Next 2 Days': [moment(), moment().add(2, 'days')],
                'Next 5 Days': [moment(), moment().add(5, 'days')],
                'Next 7 Days': [moment(), moment().add(7, 'days')]
            }
        }, cb);

        cb(start, end);

    });
</script>
</body>
</html>